<template>
  <div ref="Graph" :style="{ width: width, height: height }" />
</template>
<script>
export default {
  name: 'Graph',
  data() {
    return {
      data2: [],
      linksData2: [],
      linksData3:[]
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val[0]) {
          this.data2 = val[0];
        }
        if (val[1]) {
          this.linksData2 = []
          this.linksData3 = val[1]
        }
        this.makeChart()
      },
      deep: true
    }
  },
  components: {},

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {},

  methods: {
    // 数据遍历转换（主要是计算多重关系所显示的不同弧度值）
    changeData() {
      if (this.linksData2.length == 0) {
        this.linksData2 = this.linksData3
      }
      let data, linksData
      data = this.data2
      linksData = this.linksData2
      var arr = []
      for (const i in linksData) {
        linksData[i].count = 0
        arr.push(linksData[i])
      }
      for (const i in linksData) {
        for (const j in arr) {
          if (
            (arr[j].count === 0 && arr[j].source === linksData[i].source && arr[j].target === linksData[i].target) ||
            (arr[j].target === linksData[i].source && arr[j].source === linksData[i].target)
          ) {
            ++linksData[i].count
          }
        }
      }
      for (const i in linksData) {
        linksData[i].label = {
          show: true,
          formatter: function(x) {
            return x.data.relationshipRate // 自定义线条之间的关系名称
          }
        }
        if (linksData.length == this.linksData3.length) {
          linksData[i].lineStyle = {
            opacity: 0.2,
            curveness: linksData[i].count * 0.1 // 线条弧度
          }
        }
      }
      return {
        data,
        linksData
      }
    },
    makeChart() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != '' &&
        this.myChart != undefined
      ) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(this.$refs.Graph)
      this.myChart.clear() //清空画布数据
      let list = this.changeData()
      let data = list.data
      let linksData = list.linksData
      // console.log(JSON.stringify(data));
      // console.log(JSON.stringify(linksData));
      let option = {
        backgroundColor: '#fff', // 设置背景颜色
        title: {
          text: '亲密度',
          top: 12,
          left: 12,
          textStyle: {
            fontSize: 14,
            color: '#444444'
          }
        },
        tooltip: {
          trigger: 'none'
        }, // 提示框
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        select: {
          disabled: true,
          selectedMode: false
        },
        series: [
          {
            type: 'graph',
            layout: 'circular',
            symbolSize: 50, // 倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
            roam: true, // 鼠标缩放功能
            label: {
              color: '#fff', //标签颜色
              show: true // 是否显示标签
            },
            focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边
            edgeSymbol: ['none', 'none'], // 关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
            edgeSymbolSize: [6, 6], // 设置两边箭头大小
            draggable: false, //节点是否可以拖拽
            edgeLabel: {
              positon: 'start',
              show: false,
              fontSize: 14 // 关系（也即线）上的标签字体大小
            },
            force: {
              repulsion: 400, // 节点之间的斥力因子值
              edgeLength: 170 // 两个节点之间的距离
            },
            data: data,
            links: linksData,
            lineStyle: {
              // opacity: 0.3,
              width: 4,
              dashOffset: 20,
              color: '#8ab7bd' // 设置线条颜色 8ab7bd
              // curveness: 0.1 // 设置线条的弧度
            },
            itemStyle: {
              color: function(params) {
                if (params.data.sex == '1') {
                  return '#9DD1F1'
                }else if (params.data.sex == '2') {
                  return '#FFC2E2'
                }else{
                  return '#8ab7bd'
                }
              },
              fontSize: 12,
              borderWidth: 1,
              borderColor: '#ffffff',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 8
            }
          }
        ]
      }

      let _this = this
      _this.myChart.setOption(option, true)
      setTimeout(function() {
        window.onresize = function() {
          _this.myChart.resize()
        }
      }, 200)
      _this.myChart.on('click', function(data) {
        _this.linksData2 = []
        _this.linksData3.forEach(el => {
          if (data.data.id == el.source) {
            el.lineStyle = {
              opacity: 0.7,
              curveness: 0.1
            }
            _this.linksData2.push(el)
          }
        })
        if (_this.linksData2.length > 0) {
          _this.makeChart()
        }
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
